<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">标签管理</span>
      <a-button type="primary" @click="showModal()">
        <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
        新建
      </a-button>
    </div>
    <a-table :defaultExpandAllRows="true" :dataSource="list" :columns="columns" :pagination="pagination" :loading="loading" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'isUsed'">
          <a-switch :checked="!!record.isUsed" checked-children="启用" @change="changeStatus(record)" un-checked-children="停用" />
        </template>
        <template v-if="column.dataIndex === 'action'">
          <div>
            <a @click="showModal(record)">编辑</a>
            <template v-if="!record.isUsed">
              <a-divider type="vertical" />
              <a class="color-error" @click="deleteTag(record)">删除</a>
            </template>
          </div>
        </template>
      </template>
    </a-table>
    <UpdateTag ref="UpdateTagRef" @reload="getContentList" />
  </div>
</template>

<script setup lang="ts">
  import { message, Modal, TablePaginationConfig, TableProps } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import { computed, ref } from 'vue'

  import { requestDeleteTagByIds, requestSaveTag, requestTagList } from '/@/api/exchange/tagManage'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  import { getTagTypeLabel } from '../constants'
  import UpdateTag from './UpdateTag.vue'

  const UpdateTagRef = ref<InstanceType<typeof UpdateTag>>()

  const columns = [
    {
      title: '标签名称',
      width: 300,
      dataIndex: 'tagName',
    },
    {
      title: '标签类型',
      dataIndex: 'tagType',
      customRender: ({ text }) => getTagTypeLabel(text),
    },
    {
      title: '最后更新人',
      dataIndex: 'updatedBy',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedTime',
      customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '状态',
      dataIndex: 'isUsed',
    },
    {
      title: '操作',
      dataIndex: 'action',
    },
  ]
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<TagManageTypes.SearchData>()

  const list = ref<TagManageTypes.IResponse[]>([])

  // 分页查询
  const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
    pagination.value.current = tabPage.current || 1
    pagination.value.pageSize = tabPage.pageSize || 10
    getContentList()
  }

  // 获取页面list
  const getContentList = async () => {
    loading.value = true
    const { responseData } = await requestTagList({
      ...page.value,
      ...searchParams.value,
    })
    list.value = responseData.list || []
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: TagManageTypes.SearchData) => {
    searchParams.value = params
    pagination.value.current = 1
    getContentList()
  }

  // 新建标签
  const showModal = (info?: TagManageTypes.IResponse) => UpdateTagRef.value?.showModal(info)

  // 切换状态
  const changeStatus = async (info: TagManageTypes.IResponse) => {
    const { responseCode } = await requestSaveTag({
      ...info,
      isUsed: info.isUsed ? 0 : 1,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      message.success('操作成功')
      getContentList()
    }
  }

  // 删除评论
  const deleteTag = (record: TagManageTypes.IResponse) => {
    Modal.confirm({
      title: '删除',
      content: '是否删除该标签?',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        // 删除
        const { responseCode } = await requestDeleteTagByIds({ idList: [record.id] })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('删除成功')
          getContentList()
        }
      },
    })
  }
  defineExpose({
    search,
  })
</script>
<style lang="less" scoped></style>
